<template>
  <div class="have">
    <div v-for="(item, index) in list" :key="index" class="item" @click="showChoice(index)">
      <div>
        <img :src="src[item.type_id - 1]">
        <div class="text">{{item.type_name}}</div>
      </div>
    </div>
    <van-popup style="width: 100%" v-for="(item, index) in list" :key="'p'+index" v-model="show"
               v-if="index === showNum"
               position="bottom">
      <div @click="clickRoute(index)">
        <van-nav-bar
          title="创建"
        />
      </div>
      <div @click="closeChoice">
        <van-nav-bar
          title="取消"
        />
      </div>
      <router-link :to="{path: '/TemplateInfo', query:{type_id: item.type_id, type_name: item.type_name}}" :id="index">
      </router-link>
    </van-popup>
    <div style="clear: both;height: 0;"></div>
  </div>
</template>

<script>
  import {Dialog, Popup, NavBar} from 'vant';

  export default {
    name: "TemplateList",
    components: {
      [Dialog.name]: Dialog,
      [Popup.name]: Popup,
      [NavBar.name]: NavBar,
    },
    data() {
      return {
        list: [],
        src: [require("@/assets/icon/Exam.png"), require("@/assets/icon/Score.png")],
        show: false,
        showNum: -1
      }
    },
    methods: {
      getData() {
        let _this = this;
        let token = _this.getCookie("token");
        _this.$http.post(_this.apiUrl("user/users/getTempSystem"), {}, {headers: {'token': token}})
          .then((res) => {
            // console.log(res.data);
            _this.list = res.data.data;
          });
      },
      showChoice(index) {
        let _this = this;
        _this.show = true;
        _this.showNum = index
      },
      closeChoice() {
        let _this = this;
        _this.show = false;
      },
      clickRoute(index) {
        document.getElementById(index).click();
      }
    },
    mounted() {
      let _this = this;
      _this.getData();
    }
  }
</script>

<style scoped>
  .item {
    float: left;
    width: 20%;
    margin: 2.5%;
  }

  .item .text {
    width: 100%;
    height: 37.3px;
    text-align: center;
    font-size: 14px;
    word-wrap: break-word;
    overflow: hidden;
  }
</style>
<style>
  .have .van-nav-bar {
    height: 50px;
    line-height: 50px;
  }
</style>
